<template>
  <div class="bg-white overflow-hidden">
    <div class="form-title">企业产业建设信息</div>
    <el-form ref="buildForm" :model="tempFormObj" label-width="0">
      <table
        v-loading="formLoading"
        class="self-table-form w-full table-auto border-collapse border"
        style="min-height: auto"
      >
        <thead>
          <th
            v-for="item in headNameList"
            :key="item"
            class="m-label text-center"
          >
            {{ item }}
          </th>
          <th class="m-label text-center w-20">操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tempFormObj.list" :key="item.id">
            <td class="m-label text-center w-16">
              {{ index + 1 }}
            </td>
            <td>
              <el-form-item
                :prop="'list.' + index + '.school'"
                :rules="formRules.school"
              >
                <el-input type="text" v-model="item.school"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'list.' + index + '.direction'"
                :rules="formRules.direction"
              >
                <el-input type="text" v-model="item.direction"></el-input>
              </el-form-item>
            </td>

            <td>
              <el-form-item
                :prop="'list.' + index + '.investment'"
                :rules="formRules.investment"
              >
                <el-input type="text" v-model="item.investment"></el-input>
              </el-form-item>
            </td>

            <td>
              <el-form-item
                :prop="'list.' + index + '.time'"
                :rules="formRules.time"
              >
                <el-date-picker
                  v-model="item.time"
                  align="right"
                  type="date"
                  value-format="yyyy-MM-dd"
                  prefix-icon="el-icon"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                  style="width: 5.875rem"
                >
                </el-date-picker>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'list.' + index + '.platform'"
                :rules="formRules.platform"
              >
                <el-input type="text" v-model="item.platform"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item
                :prop="'list.' + index + '.innovateDirection'"
                :rules="formRules.innovateDirection"
              >
                <el-input
                  type="text"
                  v-model="item.innovateDirection"
                ></el-input>
              </el-form-item>
            </td>

            <td>
              <el-form-item
                :prop="'list.' + index + '.innovateTime'"
                :rules="formRules.innovateTime"
              >
                <el-date-picker
                  v-model="item.innovateTime"
                  align="right"
                  type="date"
                  value-format="yyyy-MM-dd"
                  prefix-icon="el-icon"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                  style="width: 5.875rem"
                >
                </el-date-picker>
              </el-form-item>
            </td>
            <td>
              <div class="flex justify-center">
                <el-button
                  class="m-auto"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteFormItem(item.id)"
                >
                </el-button>
              </div>
            </td>
          </tr>
          <tr>
            <td :colspan="headNameList.length + 1">
              <div class="flex justify-start">
                <el-button class="ml-0" type="primary" @click="addFormItem">
                  添加记录
                </el-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="flex justify-between py-10 text-center">
        <el-button
          v-if="isSubmit"
          class="confirm-btn tracking-widest"
          type="primary"
          size="medium"
          @click="submitForm"
        >
          保存 / 下一步
        </el-button>

        <DeclareNextItem ref="next" v-show="false" />
      </div>
    </el-form>
  </div>
</template>

<script>
import { checNumber, limitLength } from "@/utils/formRules.js";
import { addBuild } from "@/api/declareForm/build";

export default {
  // name: "BuildForm",
  props: {
    sourceList: {
      type: Array,
      default: [],
    },
    isSubmit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    // 输入框校验长度
    var inputLimitLength = (maxLength) => {
      return limitLength(maxLength);
    };

    return {
      formLoading: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      headNameList: [
        "序号",
        "产学研学校",
        "产学研方向",
        "产学研投入",
        "产学研时间",
        "企业创新平台",
        "创新平台方向",
        "创新平台时间",
      ],
      modleFormObj: {
        id: -1,
        school: "",
        direction: "",
        investment: "",
        time: "",
        platform: "",
        innovateDirection: "",
        innovateTime: "",
        relationId: "",
      },
      tempFormObj: {
        list: [],
        relationId: "",
      },
      // 表单规则
      formRules: {
        school: [
          { required: true, message: "此字段不能为空", trigger: "blur" },
          {
            validator: inputLimitLength(30),
            trigger: "blur",
          },
        ],
        direction: [
          { required: true, message: "此字段不能为空", trigger: "blur" },
          {
            validator: inputLimitLength(30),
            trigger: "blur",
          },
        ],
        investment: [
          { required: true, message: "此字段不能为空", trigger: "blur" },
          {
            validator: inputLimitLength(30),
            trigger: "blur",
          },
        ],
        time: [
          { required: true, message: "此字段不能为空", trigger: "blur" },
          {
            validator: inputLimitLength(50),
            trigger: "blur",
          },
        ],
        platform: [
          { required: true, message: "此字段不能为空", trigger: "blur" },
          {
            validator: inputLimitLength(30),
            trigger: "blur",
          },
        ],
        innovateDirection: [
          { required: true, message: "此字段不能为空", trigger: "blur" },
          {
            validator: inputLimitLength(30),
            trigger: "blur",
          },
        ],
        innovateTime: [
          { required: true, message: "此字段不能为空", trigger: "blur" },
          {
            validator: inputLimitLength(50),
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    sourceList(v, oldv) {
      if (v) {
        // v.forEach(item => {
        //   item.innovateTime = this.timeChuoToDate(item["innovateTime"]);
        //   item.time = this.timeChuoToDate(item["time"]);
        // });

        this.tempFormObj.list = v;
      }
    },
  },
  created() {
    this.initRelationId();
  },
  methods: {
    timeChuoToDate(timeChuo) {
      let lineDateStr = timeChuo.replace(/-/g, "/");
      let date = new Date(lineDateStr);
      return date;
    },

    initRelationId() {
      let realationId = this.$route.query.id;
      if (realationId || realationId == 0) {
        this.tempFormObj.relationId = parseInt(realationId);
      }
    },
    addFormItem() {
      let timeChuo = new Date();
      let addObj = JSON.parse(JSON.stringify(this.modleFormObj));
      addObj["id"] = timeChuo.valueOf();

      // 加入申报表的id
      let realationId = this.$route.query.id;
      if (realationId || realationId == 0) {
        addObj.relationId = parseInt(realationId);
      }

      this.tempFormObj.list.push(addObj);
    },
    deleteFormItem(id) {
      let tempArr = JSON.parse(JSON.stringify(this.tempFormObj.list));
      let newArr = tempArr.filter((item) => {
        return item.id !== id;
      });
      this.tempFormObj.list = newArr;
    },
    submitForm() {
      let formName = "buildForm";
      let resForm = this.tempFormObj;
      this.formLoading = true;
      this.$refs[formName].validate((valid) => {
        // debugger
        if (valid) {
          addBuild(resForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "保存成功",
              });
              // 跳转至下一页
              this.$refs.next.nextDeclareItem();
            } else {
              this.$message.error(res.msg);
            }
            this.formLoading = false;
          });
        } else {
          this.formLoading = false;
        }
      });
    },
    // checkFormHasV(rule, value, callback) {
    //   if (!value && value !== "0.00" && value !== 0) {
    //     return callback(new Error("该项为必填项"));
    //   }
    // },
  },
};
</script>

<style></style>
